<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<h:outputStylesheet library="css" name="styles.css" />
	<h:outputScript name="jquery/jquery-plugins.js" library="primefaces" />
</h:head>

<h:body>
	<h:form>
		<ui:composition template="/plantillas/plantilla.xhtml">
			<ui:define name="body">
				<br />
				<h:form id="mantenerArticulo">
					<p:contextMenu for="articulo" widgetVar="cMenu">
						<p:menuitem id="modi" value="Modificar" icon="ui-icon-pencil"
							action='#{tarti.modificar}' update="dlg" />
						<p:menuitem id="eli" value="Eliminar" icon="ui-icon-trash"
							action="#{tarti.eliminar}" >
						</p:menuitem>
					</p:contextMenu>

					<p:panelGrid columns="1" styleClass="table-out">
						<f:facet name="header">Maestro de Artículos
						<p:messages id="mensajePrime2" autoUpdate="true" />
						</f:facet>
						<p:row>
							<p:column>
								<center>

									<p:panelGrid styleClass="table-in">
										<p:row>
											<p:column>
												<p:toolbar>
													<f:facet name="left">
														<p:commandButton id="Nuevo" icon="ui-icon-document"
															action="/paginas/articulo" title="Nuevo"
															actionListener="#{tarti.registrar}" />

														<p:commandButton id="Modificar" icon="ui-icon-pencil"
															action='#{tarti.modificar}' title="Modificar"
															update="dlg" />

														<p:commandButton id="Eliminar" icon="ui-icon-trash"
															action="#{tarti.eliminar}" title="Eliminar"
															update="articulo,dlg">
															<p:confirm header="Mensaje de Conformación"
																message="¿Está seguro de eliminar el registro?"
																icon="ui-icon-alert" />
														</p:commandButton>

														<p:commandButton id="Recargar" icon="ui-icon-refresh"
															title="Recargar" update="articulo"
															actionListener='#{tarti.cargar()}' />

													</f:facet>
													<f:facet name="right">
														<h:commandLink title="Exportar excel">
															<p:graphicImage name="/images/excel.png" width="24" />
															<p:dataExporter type="xls" target="articulo"
																fileName="articulos" pageOnly="false" 
																postProcessor="#{tarti.postProcessXLS}"/>
														</h:commandLink>
													</f:facet>
												</p:toolbar>

												<p:confirmDialog global="true" showEffect="fade"
													hideEffect="fade">
													<p:commandButton value="Si"
														styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
													<p:commandButton value="No"
														styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
												</p:confirmDialog>

												<p:dialog id="dlg" header="Mensaje del Sistema"
													widgetVar="dlg" Height="40" width="400" resizable="false"
													modal="true" showEffect="fade" hideEffect="fade"
													closable="false">
													<center>
														<p:panelGrid styleClass="table-in">
															<p:row>
																<p:column width="200">
																	<center>
																		<p:outputLabel value="#{tarti.mensaje}" />
																	</center>
																</p:column>
															</p:row>
															<p:row>
																<p:column>
																	<hr></hr>
																</p:column>
															</p:row>
															<p:row>
																<p:column width="200">
																	<center>
																		<p:commandButton value="Aceptar"
																			onclick="PF('dlg').hide();" />
																	</center>
																</p:column>
															</p:row>
														</p:panelGrid>
													</center>
												</p:dialog>
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<div class="responsiveI">
													<p:dataTable id="articulo" var="articulo"
														value="#{tarti.articulos}" paginator="true" rows="15"
														sortMode="multiple"
														rowsPerPageTemplate="10,15,20,25,30,35"
														rowKey="#{articulo.artcod}" selection="#{tarti.articulo}"
														selectionMode="single" scrollable="true"
														filteredValue="#{tarti.farticulos}"> <!-- frozenColumns="4"> --> 
														
														<p:column headerText="Código" sortBy="#{articulo.artcod}"
															width="60" filterBy="#{articulo.artcod}"
															filterMatchMode="contains" filterMaxLength="10">
															<h:outputText value="#{articulo.artcod}" />
														</p:column>
														<p:column headerText="Descripción"
															sortBy="#{articulo.artdes}" width="300"
															filterBy="#{articulo.artdes}" filterMatchMode="contains"
															filterMaxLength="50">
															<h:outputText value="#{articulo.artdes}" />
														</p:column>	
														<p:column headerText="Tipo"
															sortBy="#{articulo.arttip.desesp}" width="100"
															filterBy="#{articulo.arttip.desesp}"
															filterMatchMode="contains" filterMaxLength="30">
															<h:outputText value="#{articulo.arttip.desesp}" />
														</p:column>
														<p:column headerText="Medida"
															sortBy="#{articulo.artmed.desesp}" width="70"
															filterBy="#{articulo.artmed.desesp}"
															filterMatchMode="contains" filterMaxLength="30">
															<h:outputText value="#{articulo.artmed.desesp}" />
														</p:column>
														<p:column headerText="Marca"
															sortBy="#{articulo.artmar.desesp}" width="200"
															filterBy="#{articulo.artmar.desesp}"
															filterMatchMode="contains" filterMaxLength="30">
															<h:outputText value="#{articulo.artmar.desesp}" />
														</p:column>
														<p:column headerText="Modelo"
															sortBy="#{articulo.artmod.desesp}" width="200"
															filterBy="#{articulo.artmod.desesp}"
															filterMatchMode="contains" filterMaxLength="30">
															<h:outputText value="#{articulo.artmod.desesp}" />
														</p:column>
														<p:column headerText="Usu. Reg."
															sortBy="#{articulo.arusin}" width="70"
															filterBy="#{articulo.arusin}" filterMatchMode="contains"
															filterMaxLength="10">
															<h:outputText value="#{articulo.arusin}" />
														</p:column>
														<p:column headerText="F. Reg." sortBy="#{articulo.arfein}"
															width="60" filterBy="#{articulo.arfein}"
															filterMatchMode="contains" filterMaxLength="10">
															<h:outputText value="#{articulo.arfein}">
																<f:convertDateTime type="date" pattern="dd/MM/yyyy" />
															</h:outputText>
														</p:column>
														<p:column headerText="Hora Reg."
															sortBy="#{articulo.arfein}" width="70"
															filterBy="#{articulo.arfein}" filterMatchMode="contains"
															filterMaxLength="8">
															<h:outputText value="#{articulo.arfein}">
																<f:convertDateTime type="date" pattern="HH:mm:ss" />
															</h:outputText>
														</p:column>
														<p:column headerText="Usu. Mod."
															sortBy="#{articulo.arusmd}" width="80"
															filterBy="#{articulo.arusmd}" filterMatchMode="contains"
															filterMaxLength="10">
															<h:outputText value="#{articulo.arusmd}" />
														</p:column>
														<p:column headerText="F. Mod." sortBy="#{articulo.arfemd}"
															width="60" filterBy="#{articulo.arfemd}"
															filterMatchMode="contains" filterMaxLength="10">
															<h:outputText value="#{articulo.arfemd}">
																<f:convertDateTime type="date" pattern="dd/MM/yyyy" />
															</h:outputText>
														</p:column>
														<p:column headerText="Hora Mod."
															sortBy="#{articulo.arfemd}" width="70"
															filterBy="#{articulo.arfemd}" filterMatchMode="contains"
															filterMaxLength="8">
															<h:outputText value="#{articulo.arfemd}">
																<f:convertDateTime type="date" pattern="HH:mm:ss" />
															</h:outputText>
														</p:column>
																						
													</p:dataTable>
												</div>
											</p:column>
										</p:row>
									</p:panelGrid>
								</center>
							</p:column>
						</p:row>
					</p:panelGrid>
				</h:form>
			</ui:define>
		</ui:composition>
	</h:form>
</h:body>
</html>